<script lang="ts" setup>
import loginBg from '#/assets/images/login-bg.webp'
import Footer from "#/components/common/footer.vue"
import { useRouter } from 'vue-router'
import { useUserStore } from '@vben/stores';
import { DEFAULT_HOME_PATH } from '#/utils/constants';

defineOptions({ name: 'AuthLayout' });
const router = useRouter()
const userStore = useUserStore();

const handleTitleClick = () => {
  router.push(DEFAULT_HOME_PATH)
}

</script>
<template>
  <div class="flex h-full flex-col overflow-auto min-w-[600px]">
    <div class="auth-title flex items-center h-[80px] pl-[15px] cursor-pointer" @click="handleTitleClick">
      <img :src="userStore.tenant?.loginUrl" alt="" class="w-[32px] mr-[4px]">
      <span class="font-bold text-2xl">{{ userStore.tenant?.shortName }}</span>
    </div>
    <div class="login bg-cover bg-center h-full flex-auto flex items-center justify-end
     h-auto overflow-auto min-w-[900px] pr-[150px]" :style="{ backgroundImage: `url(${loginBg})` }">
      <RouterView v-slot="{ Component }">
        <component :is="Component"
          class="border-indigo-500 bg-[#fff] rounded-[16px] w-[500px] h-[480px] min-w-[450px] overflow-hidden" />
      </RouterView>
    </div>
    <Footer></Footer>
  </div>
</template>
<style lang="less" scoped>
.sign {
  background: var(--el-color-primary);
}
</style>
